<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>animate</title>
    <link rel="stylesheet" href="../lib/animate/animatenew.min.css">
    <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" /> -->
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        :root { /* 页面根目录 */
            /* 通过--名称: 值 定义css变量 */
            --self-duration: 2s;
        }

        ul {
            list-style: none;
        }

        .box {
            position: absolute;
            top: 50px;
            left: 50px;
            width: 150px;
            height: 150px;
            background-color: #f00;
            /* 使用变量： var(--名称) */
            animation-duration: var(--self-duration);
        }

        .box:hover {
            animation-name: jello;
        }

        .inner {
            width: 100px;
            height: 100px;
            margin: 350px;
            background-color: #0f0;
            animation: shakeX .6s ease infinite both;
        }
    </style>
</head>

<body>
    <!-- 
        1、引入 animate.css 插件（动画库，定了很多个动画）
        
        animation-name / animation-duration

        2、使用：给元素添加对应 animate__动画名-类名，然后添加 animate__animated 动画时长

        animation:更改动画时长，不会导致动画重新执行
    -->

    <div class="box animate__animated animate__bounce animate__infinite"></div>

    <div class="inner"></div>
    <script type="text/javascript">

    </script>
</body>

</html>